<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/assets/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
	//页面加载完毕事件.
	$(function(){
		//1.获取商品数据,插入到select标签中.
		//GET		/InSystem/product/findAll
		$.ajax({
			url : "${pageContext.request.contextPath}/product/findAll",
			data : null,
			type : "GET",
			datatype : "json",
			success : function(msg){
				if(msg.code == 200){
					//到这说明查询数据成功
					//1.获得具体的json对象数组
					var jsonArray = msg.data;
					//2.遍历,封装数据
					//声明最终结果
					var content = "<option value=''>--请选择商品--</option>";
					for(var i = 0;i < jsonArray.length;i++){
						content += "<option value='"+jsonArray[i].id+"'>"+jsonArray[i].productName+"</option>"
					}
					//3.扔到select标签体内.
					$("#proSelect").html(content);
				}else{
					alert(msg.message);	
				}
			},
			error : function(msg){
				alert("服务器正在更新,请稍后再试....");
			}
		});
	});
	
	
	//查询商品库存
	function findProQuantity(){
		/* 路径
		GET		/InSystem/product/findProductQuantity
		参数
			id=1
		`` */
		var id = $("#proSelect").val();
		if(id == ""){
			alert("请选择商品!!!");
			return;
		}
		//发送ajax
		$.ajax({
			url : "${pageContext.request.contextPath}/product/findProductQuantity/"+id,
			data : null,
			type : "GET",
			datatype : "json",
			success : function(msg){
				if(msg.code == 200){
					var content = "<h3>该商品的库存数是: "+msg.data+" </h3>";
					
					$("#quantityInfo").html(content);
				}else{
					alert(msg.message);	
				}
			},
			error : function(msg){
				alert("服务器正在更新,请稍后再试....");
			}
		});
	}
	
	
	
	
	
	
	
	
	
	
</script>
</head>
<body>
	<div align="center" style="line-height: 20px;">
		<table style="text-align: center;" width="100%" height="100%">
			<tr style="border: none;">
				<td colspan="4">
					<h3>查看库存:</h3>
				</td>
				<td colspan="3">
					商品名称:
					<select id="proSelect">
					</select>
					<input type="button" onclick="findProQuantity()" value="查询" />
				</td>
			</tr>
			
			<tr>
				<td colspan="2" id="quantityInfo"></td>
			</tr>
		</table>
	</div>
	
</body>
</html>